<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		全选<input type="checkbox" id="all"/>
		<ul>
			<li><input type="checkbox" name="product"/>杜比环绕，家庭影院必备，超真实享受</li>
			<li><input type="checkbox" name="product"/>NADIA 99999GT 2G 1024bit极品显卡，不容错过</li>
			<li><input type="checkbox" name="product"/>精品热卖，高清晰，45寸LED电视</li>
			<li><input type="checkbox" name="product"/>Snoy索尼家用最新款笔记本</li>
			<li><input type="checkbox" name="product"/>华为、荣耀3C、超低价、性价比奇高</li>
		</ul>
		<script>
			let checkAll=document.getElementById("all");
			let products=document.getElementsByName("product");
			//对全选按钮的点击事件进行定义
			checkAll.onclick=function(){
				let flag=checkAll.checked;
				//判断全选按钮的状态
				if(flag){
					//如果是勾选，就全都勾选
					for(let i=0;i<products.length;i++){
						products[i].checked=true;
					}
				}else{
					//如果是取消勾选，就是全都取消勾选
					for(let i=0;i<products.length;i++){
						products[i].checked=false;
					}
				}
			};
			//给每一个商品的勾选框设置点击事件
			for(let i=0;i<products.length;i++){
				products[i].onclick=function(){
					//获取这一个商品勾选的状态
					let flag=products[i].checked;
					if(flag){
						//如果勾选状态是true，则需要判断其它商品是否勾选
						let allSelectFlag=true;
						for(let j=0;j<products.length;j++){
							if(products[j].checked==false){
								allSelectFlag=false;
							}
						}
						//如果其他商品都是勾选的，则全选也应该勾选
						//如果其他商品不都是勾选的，则全选也不应该勾选
						if(allSelectFlag){
							checkAll.checked=true;
						}else{
							checkAll.checked=false;
						}
					}else{
						//如果勾选状态是false，则把全选的勾选状态设置为false
						checkAll.checked=false;
					}
				};
			}
			
			
		</script>
	</body>
</html>